<template>
  <BasicModal @register="registerCategoryModal" v-bind="$attrs">
    <BasicTable @register="registerTable" @row-click="rowClick">
      <template #toolbar>
        <a-button type="primary" @click="handlePreview">{{ 预览 }} </a-button>
      </template>
    </BasicTable>
  </BasicModal>
  <PreviewModal @register="registerPreviewModal" />
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
  import PreviewModal from './PreviewModal.vue';
  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
  import { getFormHistoryInfo } from '/@/api/form/design';
  import { getFormHistory } from '/@/api/form/design';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const columns: BasicColumn[] = [
    {
      dataIndex: 'isCurrentVersion',
      title: t('版本'),
      customRender: ({ record }) => `${record.isCurrentVersion ? t('当前版本') : t('非当前版本')}`, //1-当前版本 0-非当前版本
    },
    {
      dataIndex: 'createUserName',
      title: t('创建人'),
    },
    {
      dataIndex: 'createDate',
      title: t('创建时间'),
    },
  ];

  const formId = ref<string>('');
  const { notification } = useMessage();

  const [registerPreviewModal, { openModal }] = useModal();

  const [registerCategoryModal, { setModalProps }] = useModalInner(async (data) => {
    formId.value = data.formId;
    setModalProps({
      confirmLoading: false,
      draggable: false,
      title: data.title,
      showOkBtn: false,
      showCancelBtn: false,
      destroyOnClose: true,
      width: 800,
    });
  });
  const [registerTable] = useTable({
    api: getFormHistory,
    beforeFetch: () => {
      return formId.value;
    },
    rowKey: 'id',
    columns,
    showTableSetting: true,
    bordered: true,
    maxHeight: 200,
    rowClassName: (record) => (record.id === currentRowId.value ? 'current-row' : ''),
  });

  const currentRowId = ref<string>('');

  const rowClick = (record) => {
    currentRowId.value = record.id;
  };

  const handlePreview = async () => {
    if (!currentRowId.value) {
      notification.warning({
        message: t('提示'),
        description: t('请先选择要预览的数据项'),
      }); //提示消息
      return;
    }
    const templateJson = await getFormHistoryInfo(currentRowId.value);
    openModal(true, { title: t('预览'), formJson: templateJson.formJson });
  };
</script>
<style lang="less" scoped>
  :deep(.vben-basic-table-header__toolbar) {
    justify-content: space-between;
  }

  :deep(.current-row) td {
    background: #e6f2ff !important;
  }
</style>
